<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cardingReport</title>

    <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/tabstyle.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/iconfont.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/change_form.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/changeother.css"/>
    <style>
        .jstree-default .jstree-wholerow-clicked, .jstree-default .jstree-wholerow-hovered, .jstree-default .jstree-clicked, .jstree-default .jstree-hovered {
            background: transparent;
            box-shadow: none;
        }
        .treeNodeSelected {
            background: #d4ddeb !important;
        }

    </style>
</head>
<body>
    <div class="form-body layer-content">
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <span class="col-xs-4  form-label">数据同步方式:</span>
                    <div class="col-xs-8">
                        <span class="form-label">数据同步方式:</span>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <span class="col-xs-4 form-label">数据同步方式:</span>
                    <div class="col-xs-8">
                        <span class="form-label">数据同步方式:</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-2 form-label">文档格式:</div>
            <div class="col-xs-4">
                <select class="bs-select form-control">
                    <option>RTF</option>
                    <option>HTML</option>
                </select>
            </div>
        </div>
        <h3>项导出设置 </h3>
        <div class="left_tree  fl">
            <div id="tree_3"></div>
        </div>
        <div class="right_tbale">
            <div class="tableAttribute">
                <p class="margin-bottom-10">表清单显示属性:</p>
                <table class="layui-table layui-table-view">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>显示</th>
                        <th>宽度（%）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>序号</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="5">
                        </td>
                    </tr>
                    <tr>
                        <td>表中文名</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="30">
                        </td>
                    </tr>
                    <tr>
                        <td>表名</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="30">
                        </td>
                    </tr>
                    <tr>
                        <td>表名（含模式名）</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary">
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="">
                        </td>
                    </tr>
                    <tr>
                        <td>类型</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="15">
                        </td>
                    </tr>
                    <tr>
                        <td>数据量</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="20">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="fieldAttribute display_none">
                <p class="margin-bottom-10">字段显示属性:</p>
                <table class="layui-table layui-table-view">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>显示</th>
                        <th>宽度（%）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>序号</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="5">
                        </td>
                    </tr>
                    <tr>
                        <td>字段名</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="20">
                        </td>
                    </tr>
                    <tr>
                        <td>字段中文名</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="20">
                        </td>
                    </tr>
                    <tr>
                        <td>数据类型</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="20">
                        </td>
                    </tr>
                    <tr>
                        <td>注释</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary">
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="">
                        </td>
                    </tr>
                    <tr>
                        <td>主键</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="5">
                        </td>
                    </tr>
                    <tr>
                        <td>外键</td>
                        <td>
                            <form action="" class="layui-form">
                                <input type="checkbox" name="like[write]"  lay-skin="primary" checked>
                            </form>
                        </td>
                        <td>
                            <input type="text" class="form-control columnName"  value="20">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>

<script src="../../assets/global/scripts/app.min.js" type="text/javascript"></script>

<script src="../../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jstree/src/jstree.search.js"></script>

<script src="../../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>

<script src="../../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/layui/layui.all.js"></script>

<script>
    $("#tree_3").jstree({
        core: {
            themes: {
                responsive: !1,
                "icons" : false,
                "dots" : false
            },
            check_callback: !0,
            data: [
                {
                    text: "模型视图",
                    state       : {
                        opened    : true
                    },
                    children: [{
                        text: "ER图",
                    }, {
                        text: "表清单",
                        state       : {
                            selected   : true
                        },
                        a_attr : {class : "treeNodeSelected",style:"color:#20c1dc;font-weight:800;"},
                        li_attr :{class : "tableList"}
                    }]
                },
                {text:"数据库对象",
                    state       : {
                        opened    : true
                    },
                    children: [{
                        text: "表(视图)对象",
                        state       : {
                            opened    : true
                        },
                        children :[
                            {
                                text: "字段",
                                state       : {
                                    selected   : true
                                },
                                a_attr : {class : "",style:"color:#20c1dc;font-weight:800;"},
                                li_attr :{class : "fieldAttr"}
                            }, {
                                text: "索引",
                            }, {
                                text: "唯一键",
                                state       : {
                                    selected   : true
                                },
                            }
                        ]
                    },
                        { text: "引用关系",
                            state       : {
                                selected   : true
                            },
                        }
                    ]
                }]
        },
        plugins: ["checkbox"],


    }).bind("activate_node.jstree", function (obj, e) {

        var currentNode = e.node.li_attr.class;
        console.log($(this).find(".tableList>a"));
        if(currentNode === "tableList"){
            $(this).find(".tableList>a").addClass("treeNodeSelected");
            $(this).find(".fieldAttr>a").removeClass("treeNodeSelected");
            $(".fieldAttribute").addClass("display_none");
            $(".tableAttribute").removeClass("display_none");
        }else if(currentNode === "fieldAttr"){
            $(this).find(".tableList>a").removeClass("treeNodeSelected");
            $(this).find(".fieldAttr>a").addClass("treeNodeSelected");
            $(".tableAttribute").addClass("display_none");
            $(".fieldAttribute").removeClass("display_none")
        }

    });
</script>


</html>